<template>
    <div>
        <div id="mask" v-if="isAlert">
            <div style="width:300px ;background:white; position:relative; padding:30px;">
                <p style="color:black ;text-align:center; width:100%"> 微信分享二维码 </p>
                <p @click="alertBackFn" class=" close">
                    <svg style="width:24px;height:24px;" viewBox="0 0 24 24">
                        <path fill="currentColor"
                            d="M13.46,12L19,17.54V19H17.54L12,13.46L6.46,19H5V17.54L10.54,12L5,6.46V5H6.46L12,10.54L17.54,5H19V6.46L13.46,12Z" />
                    </svg>
                </p>
                <div>
                    <vue-qr ref="Qrcode" :text="downloadData.url" colorDark="black" :margin="10" colorLight="#fff"
                        :logoSrc="downloadData.icon" :logoScale="0.2" :size="200"></vue-qr>
                </div>

            </div>
        </div>
    </div>
</template>
<script>
import vueQr from 'vue-qr'// 二维码组件
export default {
    components: { vueQr },
    props: ['url', "isAlert"],
    data() {
        return {
            downloadData: {
                url: 'https://mp.weixin.qq.com/s?__biz=MzkzNjQ2ODUzMw==&mid=2247483653&idx=1&sn=b7e2a9468c4128306fa921b3c9e2021d&chksm=c29f085ff5e88149f01bbe6f4de3449f324026a2b90d722b3d7e77b5e8d3b30677df462e8389#rd',
                icon: require('@/assets/favicon.png'),
            },
            exportLink: "",
            downloadFilename: ""
        };
    },
    methods: {
        alertBackFn() {
            this.$emit('alertBack');
        },
        downloadImg() {
            let Qrcode = this.$refs.Qrcode
            this.exportLink = Qrcode.$el.currentSrc
            this.downloadFilename = '二维码'
        }
    },
};
</script>
<style >
#mask {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

.close {
    position: absolute;
    right: 20px;
    top: 0px;
    color: rgba(59, 130, 246, 0.5);
}

.close :hover {
    color: rgba(59, 130, 246);
}</style>
  